<!--“添加视频文字”弹框-->
<template>
  <el-dialog title="视频标题" :modal="false" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--    <el-form :model="form" ref="form" :rules="rules">-->
    <!--<el-row :gutter="20" class="flex-align-center m-type">
      <el-col :span="4" class="colorB5">文字类型</el-col>
      <el-radio-group style="padding: 0;width: 100%;" v-model="form.textType">
        <el-col :span="6">
          <el-radio :label="1">封面文字</el-radio>
        </el-col>
        <el-col :span="6">
          <el-radio :label="2">全程文字</el-radio></el-col>
      </el-radio-group>
    </el-row>-->
    <!--      <el-form-item prop="content" :class="{'m-btn20':!form.content && isSaveClick==true}">-->
    <el-row class="flex-columns">
      <el-col class="colorB5 v-p-btn">主标题</el-col>
      <el-col>
        <el-input
          v-model="form.content"
          clearable
          :maxlength="10"
          placeholder="输入主标题，最多支持10字符"
        />
      </el-col>
    </el-row>
    <!--      </el-form-item>-->
    <el-row :gutter="24" type="flex" justify="space-between" class="m-btn20 p-top">
      <el-col :span="8">
        <div class="v-p-btn colorB5">字体</div>
        <el-select v-model="form.font" placeholder="请选择">
          <el-option
            v-for="item in fontList"
            :key="item.id"
            :label="item.description"
            :value="item.font">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <div class="v-p-btn colorB5">字号</div>
        <!--select 绑定 fontSize 默认为数字，需要转换成字符串即可展示，  data.fontSize = data.fontSize + ''-->
        <el-select v-model="form.fontSize" placeholder="请选择">
          <el-option
            v-for="item in fontSizeList"
            :key="item.id"
            :label="item.sizeName"
            :value="item.fontsize">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <div class="v-p-btn colorB5">效果</div>
        <img-select :attr="form.effectColorStyle" @changed="imgSelectChanged"></img-select>
      </el-col>
    </el-row>
    <!--    </el-form>-->
    <!--subtext：副标题-->
    <el-button class="add-title colorB5 flex" @click="addFitClick" v-show="fitNum<2">添加副标题</el-button>
    <!--    <el-form :model="formFit" ref="formFit" :rules="rulesFit">-->
 <!--   <div v-show="fitShow==true || formItem.subtext" class="m-btn-border">
      &lt;!&ndash;       <el-form-item prop="content" :class="{'m-btn20':!formFit.content && isSaveClick==true}">&ndash;&gt;
      <el-row class="flex-columns">
        <el-col class="colorB5 v-p-btn">副标题</el-col>
        <el-col>
          <el-input
            v-model="formFit.content"
            clearable
            :maxlength="20"
            placeholder="输入副标题，最多支持20字符"
          >
            <el-button slot="append" @click="delectFit">删除</el-button>
          </el-input>
        </el-col>
      </el-row>
      &lt;!&ndash;       </el-form-item>&ndash;&gt;
      <el-row :gutter="24" type="flex" justify="space-between" class="m-btn p-top">
        <el-col :span="8">
          <div class="v-p-btn colorB5">字体</div>
          <el-select v-model="formFit.font" placeholder="请选择">
            <el-option
              v-for="item in fontList"
              :key="item.id"
              :label="item.description"
              :value="item.font">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">字号</div>
          <el-select v-model="formFit.fontSize" placeholder="请选择">
            <el-option
              v-for="item in fontSizeFitList"
              :key="item.id"
              :label="item.sizeName"
              :value="item.fontsize">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">效果</div>
          <img-select :attr="formFit.effectColorStyle" @changed="imgSelectChanged2"></img-select>
        </el-col>
      </el-row>
    </div>-->
<!--副标题1-->
    <div v-show="fitShow==true || formItem.subtext" class="m-btn-border">
      <!--       <el-form-item prop="content" :class="{'m-btn20':!formFit.content && isSaveClick==true}">-->
      <el-row class="flex-columns">
        <el-col class="colorB5 v-p-btn">副标题1</el-col>
        <el-col>
          <el-input
            v-model="formFit.content"
            clearable
            :maxlength="10"
            placeholder="输入副标题，最多支持10字符"
          >
            <el-button slot="append" @click="delectFit(1)">删除</el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--       </el-form-item>-->
      <el-row :gutter="24" type="flex" justify="space-between" class="m-btn p-top">
        <el-col :span="8">
          <div class="v-p-btn colorB5">字体</div>
          <el-select v-model="formFit.font" placeholder="请选择">
            <el-option
              v-for="item in fontList"
              :key="item.id"
              :label="item.description"
              :value="item.font">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">字号</div>
          <el-select v-model="formFit.fontSize" placeholder="请选择">
            <el-option
              v-for="item in fontSizeFitList"
              :key="item.id"
              :label="item.sizeName"
              :value="item.fontsize">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">效果</div>
          <img-select :attr="formFit.effectColorStyle" @changed="imgSelectChanged2"></img-select>
        </el-col>
      </el-row>
    </div>
<!--    副标题2-->
    <div v-show="fitTwoShow==true || formItem.subtext" class="m-btn-border">
      <!--       <el-form-item prop="content" :class="{'m-btn20':!formFit.content && isSaveClick==true}">-->
      <el-row class="flex-columns">
        <el-col class="colorB5 v-p-btn">副标题{{fitNum<2 ? 1 : 2}}</el-col>
        <el-col>
          <el-input
            v-model="fitTwoFit.content"
            clearable
            :maxlength="10"
            placeholder="输入副标题，最多支持10字符"
          >
            <el-button slot="append" @click="delectFit(2)">删除</el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--       </el-form-item>-->
      <el-row :gutter="24" type="flex" justify="space-between" class="m-btn p-top">
        <el-col :span="8">
          <div class="v-p-btn colorB5">字体</div>
          <el-select v-model="fitTwoFit.font" placeholder="请选择">
            <el-option
              v-for="item in fontList"
              :key="item.id"
              :label="item.description"
              :value="item.font">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">字号</div>
          <el-select v-model="fitTwoFit.fontSize" placeholder="请选择">
            <el-option
              v-for="item in fontSizeFitList"
              :key="item.id"
              :label="item.sizeName"
              :value="item.fontsize">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="v-p-btn colorB5">效果</div>
          <img-select :attr="fitTwoFit.effectColorStyle" @changed="imgSelectChanged3"></img-select>
        </el-col>
      </el-row>
    </div>
    <!--    </el-form>-->
    <div class="flex-end m-t-btn30">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="saveForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ImgSelect from './img-select'
import { fontListAll, getFontSize, saveOrUpdateText, checkAndBuild, deleteProjectText } from "@/api/creatCenter/longVideo";
export default {
  name: 'addscene',
  components: {ImgSelect},
  data () {
    const fitDeafult = {
      // 1副标题
      subType: 2,
      username:this.$store.state.user.info.username,
      // 文字类型
      textType: 2,
      fontSize: '',
      font: '',
      content: '',
      effectColorStyle: null
    };
    const fitTwoDeafult = {
      // 2副标题
      subType: 2,
      username:this.$store.state.user.info.username,
      // 文字类型
      textType: 2,
      fontSize: '',
      font: '',
      content: '',
      effectColorStyle: null
    };
    return {
      fitDeafult,
      fitTwoDeafult,
      visible: false,
      // 是否点击了保存按钮
      isSaveClick: false,
      rules: {
        content: [
          {
            required: true,
            message: '请输入主标题',
            trigger: 'blur'
          }
        ]
      },
      rulesFit: {
        content: [
          {
            required: true,
            message: '请输入副标题',
            trigger: 'blur'
          }
        ]
      },
      // 主标题id
      parentId: 0,
      fitNum:0,
      // 副标题1是否展示
      fitShow: false,
      // 副标题2是否展示
      fitTwoShow: false,
      // 主标题
      form: {
        subType: 1,
        username:this.$store.state.user.info.username,
        // 文字类型  1.封面文字 2.全程文字
        textType: 2,
        fontSize: '',
        font: '',
        content: '',
        effectColorStyle: null
      },

      // 副标题1
      formFit:{...fitDeafult} ,
      // 副标题2
      fitTwoFit: {...fitTwoDeafult},
      // 字体
      fontList: [],
      // 字号
      fontSizeList: [],
      // 副标题
      fontSizeFitList: [],
      formItem: {}

    }
  },
  props: {
  },
  created () {
    this.init()
  },
  methods: {
    show(){
      this.visible = true
    },
    edit (item) {
      console.log("编辑item",item)
      this.visible = true
      if (!item) {
        this.fitShow = false
        this.fitTwoShow = false
        this.fitNum=0
        this.formItem.subtext = ''
      }
      if (item) {
        this.fitNum=item.length-1
        this.form = item[0]
        this.form.fontSize = item[0].fontSize+''
        if(item.length>1){
          this.formFit = item[1]
          this.formFit.fontSize = item[1].fontSize+''
          this.fitShow =  true
        }
        if(item.length>2){
          this.fitTwoFit = item[2]
          this.fitTwoFit.fontSize = item[2].fontSize+''
          this.fitTwoShow =true
        }



        /*this.formItem = JSON.parse(JSON.stringify(item))
        console.log("编辑itemthis.formItem",this.formItem)

        if (this.formItem) {
          this.formItem.fontSize = this.formItem.fontSize + ''
          if (this.formItem.subtext) {
            this.formItem.subtext.fontSize = this.formItem.subtext.fontSize + ''
          }
          this.form = this.formItem
          // 副标题1
          this.formFit = this.formItem.subtext ? this.formItem.subtext : this.formFit
          this.fitShow = !!this.formFit.content

          // 副标题2
          this.fitTwoFit = this.formItem.subtext ? this.formItem.subtext : this.fitTwoFit
          this.fitTwoShow = !!this.fitTwoFit.content

        }*/
      }
    },
    // 添加副标题
    addFitClick(){
      this.fitNum +=1
      if(this.fitNum==1){
        this.fitShow=true
        // 副标题1
        this.formFit={...this.fitDeafult}
        this.formFit.font = this.fontList[0].font
        this.formFit.fontSize = this.fontSizeFitList[0].fontsize + ''
      }
      if(this.fitNum==2){
        this.fitTwoShow=true
        // 副标题2
        this.fitTwoFit={...this.fitTwoDeafult}

        this.fitTwoFit.font = this.fontList[0].font
        this.fitTwoFit.fontSize = this.fontSizeFitList[0].fontsize + ''
      }
    },
    // 删除副标题 index 1 副标题1 2 副标题2
    delectFit (index) {
      if(index==1){
        this.fitNum--
        this.fitShow = false
        // 副标题1
        this.formFit={...this.fitDeafult}
        this.formFit.font = this.fontList[0].font
        this.formFit.fontSize = this.fontSizeFitList[0].fontsize + ''
      }
      if(index==2){
        this.fitTwoShow = false
        this.fitNum--
        // 副标题2
        this.fitTwoFit={...this.fitTwoDeafult}



        this.fitTwoFit.font = this.fontList[0].font
        this.fitTwoFit.fontSize = this.fontSizeFitList[0].fontsize + ''
      }
      this.formItem.subtext = null
    },
    cancel () {
      this.updateVisible(false)
     /* // 副标题
      this.formFit = {
        // 文字类型
        textType: 2,
        fontSize: this.fontSizeFitList[0].fontsize + '',
        font: this.fontList[0].font,
        content: '',
        effectColorStyle: null
      }
      // 副标题2
      this.fitTwoFit = {
        // 文字类型
        textType: 2,
        fontSize: this.fontSizeFitList[0].fontsize + '',
        font: this.fontList[0].font,
        content: '',
        effectColorStyle: this.fitTwoFit.effectColorStyle
      }*/

    },
    saveForm () {
      /* this.isSaveClick = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.save()
        } else {
          return false
        }
      }) */
      if (!this.form.content) {
        this.$message.warning('请输入主标题')
      } else if (!this.formFit.content && this.fitShow === true) {
        this.$message.warning('请输入副标题1')
      }
      else if (!this.fitTwoFit.content && this.fitTwoShow === true) {
        //fitNum<2 代表只有一个副标题
        let hint=this.fitNum<2 ? 1 : 2
        this.$message.warning('请输入副标题'+hint)
      }

      else {
        this.save()
      }
    },
    // 保存剪辑工程文字
    async save () {
      let longVideoTexts=[]
      this.form.subType=1
      this.form.username=this.$store.state.user.info.username
      longVideoTexts.push(this.form)
      if(this.fitShow === true){
        longVideoTexts.push(this.formFit)
      }
      if(this.fitTwoShow === true){
        longVideoTexts.push(this.fitTwoFit)
      }
      this.$emit('loadText',longVideoTexts)
      console.log("longVideoTexts")
      this.cancel()
      /*let params = {}
      Object.assign(params, this.form, {
        // 1主标题
        subType: 1,
        parentId: 0,
        projectId: sessionStorage.getItem('projectId'), // 剪辑工程ID
        username: localStorage.getItem('username') // 所属用户名
      })
      let data = await saveOrUpdateText(params)
        .catch((e) => {
          this.$message.error(e)
        })
      this.parentId = data.data.id

      if (this.fitShow === true || this.formItem.subtext) {
        let paramsFit = {}
        Object.assign(paramsFit, this.formFit, {
          textType: this.form.textType,
          // 2副标题
          subType: 2,
          parentId: this.parentId,
          projectId: sessionStorage.getItem('projectId'), // 剪辑工程ID
          username: localStorage.getItem('username') // 所属用户名
        })
        await saveOrUpdateText(paramsFit)
          .catch((e) => {
            this.$message.error(e)
          })
        this.cancel()
        this.$emit('loadText')
      } else {
        this.cancel()
        this.$emit('loadText')
      }
      this.checkAll()*/
    },
    imgSelectChanged (e) {
      this.form.outLineColour = e.outLineColour
      this.form.backColour = e.backColour
      this.form.effectColorStyle = e.effectColorStyle
    },
    imgSelectChanged2 (e) {
      if (this.fitShow === true || this.formItem.subtext) {
        this.formFit.outLineColour = e.outLineColour
        this.formFit.backColour = e.backColour
        this.formFit.effectColorStyle = e.effectColorStyle
      }
    },
    imgSelectChanged3 (e) {
      if (this.fitTwoShow === true || this.formItem.subtext) {
        this.fitTwoFit.outLineColour = e.outLineColour
        this.fitTwoFit.backColour = e.backColour
        this.fitTwoFit.effectColorStyle = e.effectColorStyle
      }
    },

    async init () {
      // 获取所有字体
      this.fontList = await fontListAll()
      this.form.font = this.fontList[0].font
      this.formFit.font = this.fontList[0].font
      this.fitTwoFit.font = this.fontList[0].font
      let fontSizeList = await getFontSize({
        // 字体大小类型 1字幕2标题3副标题
        sizeType: 2
      })
      // 字号number转string
      fontSizeList.map((e) => {
        this.fontSizeList.push({'id': e.id, 'fontsize': (e.fontsize + ''), 'sizeName': e.sizeName})
      })
      let fontSizeFitList = await getFontSize({
        // 字体大小类型 1字幕2标题3副标题
        sizeType: 3
      })
      // 字号number转string
      fontSizeFitList.map((e) => {
        this.fontSizeFitList.push({'id': e.id, 'fontsize': (e.fontsize + ''), 'sizeName': e.sizeName})
      })
      this.form.fontSize = fontSizeList[0].fontsize + ''
      this.formFit.fontSize = fontSizeFitList[0].fontsize + ''
      this.fitTwoFit.fontSize = fontSizeFitList[0].fontsize + ''
    },
    handleClose () {
      this.updateVisible(false)
    },
    /* 更新 visible */
    updateVisible (value) {
      this.visible = false
      if(this.visible==false){
        this.fitShow = false
        this.fitTwoShow = false
        this.fitNum=0
        this.isSaveClick = false

        this.form = {
          // 文字类型
          textType: 2,
          fontSize: this.fontSizeList[0].fontsize + '',
          font: this.fontList[0].font,
          content: '',
          effectColorStyle: null
        }
        // 副标题1
        this.formFit={...this.fitDeafult}
        // 副标题2
        this.fitTwoFit={...this.fitTwoDeafult}
      }
    }
  }
}
</script>

<style scoped>
  /deep/ .el-form-item{
    margin: 0;
  }
  /deep/ .el-radio{
    color: #000;
  }
  /deep/ .el-input__inner{
    color: #000;
    height: 34px;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
  }
  /deep/ .el-dialog__body{
    padding: 20px;
  }
  /deep/ .el-dialog{
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 40%;

  }
  /deep/ .el-dialog__title{
    color: #000;
    font-weight: 700;
    font-size: 16px;
  }
  /deep/ .el-button{
    border: 1px solid #D9D9D9;
  }
  /deep/ .el-input-group__append, .el-input-group__prepend{
    background-color: #409eff;
    border: none;
    color: #fff;
  }
  /*/deep/ .el-input__inner{
    border: 1px solid #D9D9D9;
    border-radius: 2px;
  }*/
  /*/deep/ .el-dialog.text-dialog{*/
  /*  background: #FFFFFF;*/
  /*  border-radius: 10px;*/
  /*}*/
  .m-type{
    margin-bottom: 24px;

  }
  .m-btn{
    margin-bottom: 10px;
  }
  .m-btn20{
    margin-bottom: 20px;
  }
  .m-btn-border{
    padding:15px 0 0 ;
    border-top: 1px solid #D9D9D9;
  }
  .add-title{
    margin-bottom: 20px;
    background-color: #fff;
    width: 100%;
    height: 34px;
    border: 1px dashed #D9D9D9;
    border-radius: 2px;
    font-size: 12px;
  }
</style>
